<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>用户界面样式和initial</title>
    <link rel="stylesheet" href="../common.css">
    <script src="../jquery-2.2.0.js"></script>
    <script src="../main.js"></script>
    <style>
        div{
            margin: 5px;
        }
        input[type=radio]:checked{
            outline: 2px solid orange;
        }
        input[type=text]:focus{
            outline: 2px solid deeppink;
        }

        #outOffset input[type=radio]:checked{
            outline-offset: 2px;
        }
        #outOffset input[type=text]:focus{
            outline-offset: 2px;
        }

        #outOffset2 input[type=radio]:checked{
            outline-offset: -3px;
        }
        #outOffset2 input[type=text]:focus{
            outline-offset: -5px;
        }

        #resize div{
            width:150px;
            height: 150px;
            display: inline-block;
            border:2px solid blue;
            margin: 10px;
            line-height: 150px;
            background-color: #7d97ff;
            font-weight: bold;
            color: white;
            text-shadow: 1px 1px 1px black;
            text-align: center;
            overflow: auto;
        }
        #resize div:nth-of-type(1){
            resize: horizontal;
        }
        #resize div:nth-of-type(2){
            resize: vertical;
        }
        #resize div:nth-of-type(3){
            resize: both;
        }
        #resize div:nth-of-type(4){
            resize: none;
        }

        #initial button{
            padding:5px 10px;
            background-color: #0055cc;
            color:white;
            font-size: 1.2rem;
            font-family: 微软雅黑;
            box-shadow: 2px 2px 2px gray;
        }
        #initial div:nth-of-type(2) button{
            color: initial;
        }
        #initial div:nth-of-type(3) button{
            color: initial;
            background-color: initial;
        }
        #initial div:nth-of-type(4) button{
            font-family: initial;
        }

        #initial2 h1{
            border:1px solid gray;
        }
        #initial2 div:nth-of-type(2) h1{
            font-size: 2rem;
        }
        #initial2 div:nth-of-type(3) h1{
            font-size: initial;
            font-weight: initial;
        }
    </style>
</head>
<body>
<hr>
<h3>用outline绘制轮廓线（IE不支持）</h3>
<section id="outline">给选中的单选框绘制轮廓线
    <div>性别：
        <input type="radio" name="sex2">男
        <input type="radio" name="sex2">女
    </div>
    <div>点进来就会绘制一条红色轮廓线<br>
        <input type="text" placeholder="点我试试">
        <input type="text" placeholder="点我试试">
    </div>
</section>

<hr>
<h3>用outline-offset: 2px;使轮廓线向外扩张2像素</h3>
<section id="outOffset">给选中的单选框绘制轮廓线
    <div>性别：
        <input type="radio" name="sex">男
        <input type="radio" name="sex">女
    </div>
    <div>点进来就会绘制一条红色轮廓线<br>
        <input type="text" placeholder="点我试试">
        <input type="text" placeholder="点我试试">
    </div>
</section>

<hr>
<h3>给radio廓线向内收缩3像素，输入框向内收缩5像素</h3>
<section id="outOffset2">给选中的单选框绘制轮廓线
    <div>性别：
        <input type="radio" name="sex3">男
        <input type="radio" name="sex3">女
    </div>
    <div>点进来就会绘制一条红色轮廓线<br>
        <input type="text" placeholder="点我试试">
        <input type="text" placeholder="点我试试">
    </div>
</section>

<hr>
<h3>通过拖动边框改变元素大小，谷歌只能拉伸，火狐可缩放，ie不支持</h3>
<section id="resize">
    <div>可水平拖动</div>
    <div>可竖直拖动</div>
    <div>水平和竖直都能拖动</div>
    <div>不能拖动</div>
</section>

<hr>
<h3>通过initial取消给元素设置的样式</h3>
<section id="initial">
    <div><button>设置好样式的按钮</button></div>
    <div><button>取消文字颜色设置</button></div>
    <div><button>取消文字颜色和背景颜色设置</button></div>
    <div><button>取消字体设置</button></div>
</section>

<hr>
<h3>通过initial取消给元素设置的样式，对于h1这样浏览器指定默认样式的影响</h3>
<section id="initial2">
    <div><h1>这是默认h1标题</h1></div>
    <div><h1>指定h1大小为2rem</h1></div>
    <div><h1>然后取消h1的字号大小和font-weight样式</h1></div>
    <strong>由此看来，initial取消样式会让h1重置到css的默认值上，而不考虑浏览器给h1指定的样式</strong>
</section>

</body>
</html>


